<template>
	<view class="content">
		<nav-bar title='我的服务' black bgColor="rgba(255,255,255,0)" titleColor="#FFCD87" iconColor="#FFCD87"></nav-bar>
		<block>
			<view class="vip-swiper-box">
				<swiper easing-function="linear" :current="current" @animationfinish="animationfinish">
					<swiper-item v-for="(vip,index) in money" :key="index">
						<view class="card">
							<view class="card-content">
								<view class="top">
									<text style="font-size: 39.58rpx;">{{vip.name}}</text>
									<text style=" font-size: 63.19rpx;font-weight: bold;">VIP</text>
								</view>
								<view class="bottom">
									<view class="discount">
										价格<text style="font-size: 47.23rpx;  font-weight: 700;">
											{{vip.money}}
										</text>元
									</view>
									<!-- <view class="kt-vip" @click="open(vip.id)"> -->
									<!-- <view class="kt-vip" @click="openShowPay(vip.id)">
										<text style="margin-right: 5rpx;">立即开通</text>
										<u-icon name="arrow-right" size="25rpx"></u-icon>
									</view> -->
								</view>
							</view>
							<view class="card-back">
								<image src="https://item.techolic.cn/rbt/Uploads/static/img/user/kapian.png" mode="">
								</image>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="btn-left" @click="back()">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view class="btn-right" @click="headOn()">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</block>
		<view class="vip-right">
			<view class="title">VIP权益包</view>
			<view class="right-content">
				<block v-for="(item,index) in rules" :key="index">
					<view class="right-item">
						<!-- <view class="img-box">
							<view class="item-img">
								<image :src="item.list_image" mode=""></image>
							</view>
						</view> -->
						<view class="item-left">
							福利{{1+index}}
						</view>
						<view class="item-scr">
							<text>{{item.content}}</text>
						</view>

					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				current: 0,
				sel_mid: 0,
				count_money: 0,
				money: [],
				rules: []
			}
		},
		mounted() {
			 this.get_data();
		},
		methods: {
			get_data() {
				var _this = this;
				app._get('user/get_vip', {}, function(res) {
					console.log('获取数据');
					var vip = res.vip;
					var current = _this.current;
					_this.money = vip;
					_this.count_money = res.count_money;
					console.log(vip[current].equity);
					_this.rules = vip[current].equity;
					//_this.sel_mid = res.money[0].id;
				});
			},
			headOn() {
				console.log("向前")
				if (this.current >= this.count_money) {
					this.current = this.count_money;
				} else {
					this.current += 1;
				}
				var vip = this.money;
				var current = this.current;
				this.rules = vip[current].equity;
				
			},
			back() {
				console.log("向后")
				if (this.current <= 0) {
					this.current = 0;
				} else {
					this.current -= 1;
				}
				var vip = this.money;
				var current = this.current;
				this.rules = vip[current].equity;
			},
			animationfinish(event) {
				console.log(event)
				this.current = event.detail.current;
				console.log(this.current)
			},
		}
	}
</script>

<style lang="less">
	page{
		height: 100%;
	}
	.content {
		width: 750rpx;
		height: 100%;
		background-color: #000;
		// background-image: url('https://item.techolic.cn/hjf/Public/appimg/person_bg.png');
		// background-repeat: no-repeat;
		// background-size: cover;

		.vip-swiper-box {
			position: relative;
			margin: 32rpx;

			swiper {
				height: 324rpx;

				swiper-item {
					.card {
						width: 100%;
						height: 324rpx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;

						.card-content {
							position: relative;
							z-index: 10;
							width: 75%;
							color: black;

							.top {
								letter-spacing: 5rpx;
							}

							.center {
								margin-top: 34rpx;
								color: #000;
								font-size: 28rpx;
								letter-spacing: 5rpx;
							}

							.bottom {
								margin-top: 60rpx;
								display: flex;
								align-items: center;
								justify-content: space-between;

								.discount {
									padding: 12rpx 0rpx;
									box-sizing: border-box;
									background-color: #373431;
									border-radius: 32.65rpx;
									color: #e6b961;
									font-size: 28rpx;
									width: 272rpx;
									height: 65rpx;
									line-height: 40rpx;
									text-align: center;
								}

								.kt-vip {
									display: flex;
									align-items: center;
									color: #6e521a;
									font-size: 28rpx;
								}
							}
						}

						.card-back {
							z-index: 0;
							width: 100%;
							height: 324rpx;
							position: absolute;
							top: 0rpx;
							left: 0rpx;

							image {
								width: 100%;
								height: 324rpx;
							}
						}
					}
				}
			}

			.btn-left,
			.btn-right {
				position: absolute;
				top: calc(50% - 30rpx);
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background-color: rgba(255, 255, 255, 0.3);
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn-left {
				left: 10rpx;
			}

			.btn-right {
				right: 10rpx;
			}
		}

		.vip-right {
			width: 100%;
			padding: 60rpx 0;

			.title {
				margin: 0 32rpx;
				color: #ffffff;
				font-size: 34rpx;
			}

			.right-content {
				
				// flex-wrap: wrap;
				margin: 45rpx 32rpx;
				
				.right-item {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					padding: 16rpx 22rpx;
					border-bottom:2rpx #e6b961 dotted;
					.item-left{
						margin-right: 32rpx;
						font-size: 32rpx;
						font-weight: bold;
						color: #e6c595;
					}
					.img-box {
						display: flex;
						align-items: center;
						flex-direction: column;
						position: relative;
					}

					.item-img {
						width: 104rpx;
						height: 104rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.item-scr {
						display: flex;
						flex-direction: column;
						text-align: center;
						color: #e5e5e5;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>